<template>
    <div class="baseInfo_container">
        <el-tabs v-model="state.activeName">
            <el-tab-pane v-for="{ name, label } in detailTabsCopy" :label="label" :name="name" :key="name" />
        </el-tabs>

        <!-- 我的账户 -->
        <div v-if="state.activeName === 'account'">
            <Account @changeTab="changeTab" :shopList="state.shopList"></Account>
        </div>

        <!-- 待结算订单 -->
        <div v-else-if="state.activeName === 'unsettle'">
            <Unsettled :shopList="state.shopList"></Unsettled>
        </div>

        <!-- 基本信息 -->
        <div v-else-if="state.activeName === 'info'" class="info">
            <img class="baofu_logo" src="@/assets/imgs/sys/baofu-logo-square.png" />
            <el-form label-position="left" label-width="auto">
                <el-form-item label="企业名称:">{{ entObj.merchantName || '' }}</el-form-item>
                <el-form-item label="开通时间:">{{ entObj.activeAt }}</el-form-item>
                <el-form-item label="登录号:">{{ entObj.loginNo || '' }}</el-form-item>
                <el-form-item label="开户银行:">{{ entObj.bankName || '' }}</el-form-item>
                <el-form-item label="对公账号:">{{ entObj.cardNo || '' }}</el-form-item>
                <el-form-item label="微信支付商户号:">{{ entObj.SIMID }}</el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import Unsettled from './unsettled.vue';
import Account from './account.vue';
import request from '@/request';
import store from '@/store';
import storage from '@/commons/storage';
import { reactive, ref, computed, onMounted } from 'vue';
import { getShopListHook } from '@/hooks';

const detailTabs = [
    { name: 'account', label: '我的账户' },
    { name: 'unsettle', label: '待结算订单' },
    { name: 'info', label: '基本信息' }
];
const useAuth = store.useAuthStore();
const permissions = useAuth.permissions;
// 各个tab权限
const auth = reactive([
    permissions.has('pay_account_account'),
    permissions.has('pay_for_order'),
    permissions.has('pay_account_info')
]);
const entObj = storage.get('ZW-TENANT-LOGINNO');

const state = reactive({
    activeName: '',
    shopList: []
});

const detailTabsCopy = computed(() => {
    const tabs = [];
    if (auth[0]) {
        tabs.push(detailTabs[0]);
    }
    if (auth[1]) {
        tabs.push(detailTabs[1]);
    }
    if (auth[2]) {
        tabs.push(detailTabs[2]);
    }
    return tabs;
});

// 手动选中tab
const changeTab = val => {
    state.activeName = val;
};

// 获取来源店铺
const getshopList = async () => {
    const { data } = await getShopListHook();
    state.shopList.length = 0;
    const list = data.list;
    Object.assign(state.shopList, list);
};

onMounted(() => {
    if (auth[0]) {
        state.activeName = 'account';
    } else if (auth[1]) {
        state.activeName = 'unsettle';
    } else if (auth[2]) {
        state.activeName = 'info';
    }
    getshopList();
});
</script>

<style lang="scss" scoped>
.baseInfo_container {
    :deep(.el-tabs) {
        .el-tabs__nav-scroll {
            margin-top: -12px;
        }

        .el-tabs__header {
            margin-bottom: 24px;

            .el-tabs__item {
                color: #999999;
                font-family: PingFangSC-Medium, PingFang SC;
                font-size: 16px;
                &:focus-visible {
                    box-shadow: none;
                }
            }

            .el-tabs__item.is-active {
                color: #ff6b00;
                font-weight: 500;
            }

            .el-tabs__nav-wrap::after {
                height: 1px;
                background: #eaeaea;
            }
        }
    }
    .info {
        .baofu_logo {
            width: 56px;
            height: 56px;
        }
        .el-form-item--default {
            margin-bottom: 5px;
        }
    }
}
</style>
